<template>
  <div class="divisional">
    <div class="search_box" >
      <el-row :gutter="20">

        <el-col :span="6">
          <span class="inpText">所属分行</span>
          <el-select v-model="branchCode" size="small" placeholder="请选择" @change="getSubBranchOptions" :disabled="branchDisable" style="width: 60%;">
            <el-option key="不限" label="不限" value=""></el-option>
            <el-option v-for="item in branchOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-col>

        <el-col :span="6" v-for="(item,index) in list_1" :key="index">
          <span class="inpText">{{item.name}}</span>
          <el-input style="width: 60%;" v-model.trim="item.input_val" autocomplete="off" size="small" class="searchInp" placeholder="请输入内容"></el-input>
        </el-col>

        <!-- <el-col :span="6" id="rqfw">
          <span class="inpText">还款时间</span>
          <el-date-picker v-model="dateVlaue" type="daterange" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-col> -->


        <el-col :span="6" style="text-align: right;padding-right: 63px;">
            <el-button size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>

    </div>

<!-- 列表 -->
      <el-col :span="24">
        <el-table
          v-loading="loading"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(212, 216, 206, 1)"
          :data="tableData"
          :header-cell-style="{background:'LightYellow	',color:'black'}"
          max-height="500px" style="width: 100%">
          <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
          <el-table-column prop="batchNumber" label="批次号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="identificationNumber" label="身份证号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="phoneNumber" label="手机号" :formatter="hidInfo"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="educational" label="学历"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="showDetail(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :hide-on-single-page="hidePage"
        :current-page="currentPage"
        :page-sizes="[10, 15,20]"
        :page-size="pageSize"
        :total="total"

        layout="total, sizes, prev, pager, next, slot, jumper">
        </el-pagination>
    </div>
    <el-dialog :visible.sync="isInfodetail" width="75%">
      <span slot="title">信息详情</span>
      <div class="mainInfoBox">
        <div class="infoBox" v-for="(item,index) in infoList" :key="index">
          <label for>{{item.text}}:</label>
          <el-input v-model="item.value" size="small" disabled ></el-input>
        </div>

        <el-divider content-position="left">分案还款记录</el-divider>

        <el-row style="width: 100%;">
          <el-col >
            <el-table
              v-loading="loading2"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(212, 216, 206, 1)"
              :data="infoRecords"
              :header-cell-style="{background:'LightYellow	',color:'black'}"
              style="width: 100%" >
              <el-table-column prop="batchNumber" label="批次号"></el-table-column>
              <el-table-column prop="serialNumber" label="案件流水号"></el-table-column>
              <el-table-column prop="cardNumber" label="信用卡号" :formatter="hidInfo"></el-table-column>

              <el-table-column prop="contractNumber" label="贷款合同号" ></el-table-column>
              <el-table-column prop="overdueArrears" label="逾期欠款"></el-table-column>
              <el-table-column prop="overdueLevel" label="逾期等级"></el-table-column>
              <el-table-column prop="repaymentAmount" label="还款金额"></el-table-column>

              <el-table-column prop="minimumPayment" label="最低还款金额"></el-table-column>

              <!-- <el-table-column prop="repaymentNum" label="还款账号"></el-table-column>
              <el-table-column prop="repaymentDate" label="还款时间"></el-table-column> -->
            </el-table>
          </el-col>
        </el-row>
        <div class="pageBox">
          <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :hide-on-single-page="hidePage2"
            :current-page="currentPage2"
            :page-sizes="[10, 15,20]"
            :page-size="pageSize2"
            :total="total2"

            layout="total, sizes, prev, pager, next, slot, jumper">
            </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {Message} from "element-ui";
  import {cmcUrl} from '../../../../static/baseUrl';
  export default {
    data() {
      return {
        branchCode: "",
        subBranchCode: "",
        branchDisable: false,
        subBranchDisable: false,
        branchOptions: [],
        subBranchOptions: [],

        loading: false,
        dateVlaue: "",
        isInfodetail: false,
        hidePage: false,
        currentPage: 1,
        total: 0,
        pageSize: 10,
        paramsInfo: {},
        list_1: [{
            name: "批次号",
            input_val: "",
          },
          {
            name: "信用卡号",
            input_val: "",
          },
          {
            name: "贷款合同号",
            input_val: "",
          },
          {
            name: "客户姓名",
            input_val: "",
          },
          {
            name: "身份证号",
            input_val: "",
          },
          {
            name: "手机号",
            input_val: "",
          },
        ],
        tableData: [],


        //   催收方式
        outbound: "",
        outboundOptions: this.GLOBAL.outboundOptions,
        //   风险等级
        risklevel: "",
        risklevelOptions: this.GLOBAL.risklevelOptions,
        //   逾期等级
        overdueLevelF: "",
        overdue_levelS: "",
        overdueLevelOptions: this.GLOBAL.overdueLevelOptions,
        //   详情
        detailInfo: [],

        //详情页面要显示字段
        infoList: [{
          field: "name",
          text: "姓名",
          value:"",
        },{
          field: "identificationNumber",
          text: "身份证号",
          value:"",
        },{
          field: "phoneNumber",
          text: "手机号",
          value:"",
        }],
        infoRecords:[],
        loading2: false,
        currentPage2: 1,
        total2: 0,
        pageSize2: 10,
        hidePage2: false,
      };
    },
    created() {
      this.getBranchOptions();
    },
    methods: {
      //获取所有分行列表
      getBranchOptions(){
        let branch = localStorage.getItem('BRANCH');
        this.branchCode = branch;
        let subBranch = localStorage.getItem('SUBBRANCH');
        this.subBranchCode = subBranch;
        this.$axios({
            method: "get",
            url: `/CMC/group/listFen`,
            data: "",
          })
          .then((res) => {
            console.log("获取分行数据==",res);
            if (res.code == 200) {
              this.branchOptions = res.data;
              if(branch){
                this.branchDisable = true;
              }
              //this.getSubBranchOptions(branch);
            } else {
              console.error("获取分行出错，，",res.message);
            }

            this.search();
          })
          .catch((err) => {console.log(err)});
      },
      //根据分行获取支行列表
      getSubBranchOptions(codeStr){
        if(codeStr){
          let ttt = this.branchOptions.find((element) => (element.code == codeStr));
          this.$axios({
              method: "get",
              url: `/CMC/group/listZhiByFen?id=`+ttt.id,
              data: "",
            })
            .then((res) => {
              console.log("获取支行信息==",res);
              if (res.code == 200) {
                let subBranch = localStorage.getItem('SUBBRANCH');
                this.subBranchCode = subBranch;
                this.subBranchOptions = res.data;
                if(subBranch){
                  this.subBranchDisable = true;
                }
                this.search();
                //this.total = Number(res.data.total);
              } else {
                console.error("获取支行出错，，",res.message);
              }
            })
            .catch((err) => {console.log(err)});
          }
      },

      indexMethod(index) {
        index = (index + 1) + (this.currentPage - 1) * this.pageSize;
        return index
      },
      handleCurrentChange(data) {
        this.currentPage = data;
        this.checkInfo();
      },
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.checkInfo();
      },
      handleCurrentChange2(data) {
        this.currentPage2 = data;
        this.handleClick();
      },
      handleSizeChange2(data) {
        console.log(data, "handleSizeChange");
        this.pageSize2 = data;
        this.handleClick();
      },
      showDetail(data){
        this.detailInfo = JSON.parse(JSON.stringify(data));
        Object.keys(this.infoList).forEach((item) => {
          let fiedMap = this.infoList[item];
          let key = fiedMap.field;
          this.$set(fiedMap,"value",this.detailInfo[key]);
        })
        this.isInfodetail = true;
        this.currentPage2=1;
        this.handleClick()
      },

      handleClick() {
        this.infoRecords = [];
        this.loading2 = true;
        let options = {
          state:2, //已还款数据
          IdentificationNumber: this.detailInfo["identificationNumber"],
          batchNumber: this.detailInfo["batchNumber"],
          page: this.currentPage2,
          pageSize: this.pageSize2,
        }

        this.$axios({
            method: "post",
            url: `/CMC/credit/recover/list/people/relist`,
            data: options,
          })
          .then((res) => {
            this.loading2 = false;
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.infoRecords = res.data.list;
              this.total2 = Number(res.data.total);
              if(this.total2<=this.pageSize2){
                this.hidePage2=true;
              } else {
                this.hidePage2=false;
              }
            } else {
              console.error(res.message);
            }
          })
          .catch((err) => {console.log(err)});
      },
      reset() {

        this.list_1.forEach((item) => {
          item.input_val = "";
        });
        this.dateVlaue = "";
        this.branchCode = "";
      },
      search(){
        console.log("this.search()");
        this.currentPage = 1;
        this.checkInfo();
      },
      checkInfo() {
        //批次号
        let batchNumber = this.list_1[0].input_val;
        // 信用卡号号
        let cardNumber = this.list_1[1].input_val;
        // 贷款合同号
        let contractNumber = this.list_1[2].input_val;
        // 客户姓名
        let name = this.list_1[3].input_val;
        // 身份证
        let peopleId = this.list_1[4].input_val;
        // s手机号
        let phone = this.list_1[5].input_val;
        console.log("this.dateVlaue ===",this.dateVlaue);
        let startStr = this.dateVlaue === null ? null : this.dateVlaue[0];
        let endStr = this.dateVlaue === null ? null : this.dateVlaue[1];
        if(startStr==undefined){
          startStr = null;
        }
        if(endStr==undefined){
          endStr = null;
        }

        this.loading = true;
        let options = {
          state:2, //已还款数据
          batchNumber: batchNumber,
          name:name,
          IdentificationNumber: peopleId,
          contractNumber: contractNumber,
          cardNumber: cardNumber,
          phoneNumber: phone,
          startDate: startStr === null ? '' : (startStr+" 00:00:00"),
          endDate: endStr === null ? '' : (endStr+" 23:59:59"),
          branch: this.branchCode,
          subBranch: this.subBranchCode,
          page: this.currentPage,
          pageSize: this.pageSize,
        };
        this.$axios({
            method: "post",
            url: `/CMC/credit/recover/list/people`,
            data: options,
          })
          .then((res) => {
            console.log("this.search()");
            console.log(res, "查询数据");
            console.log("this.hidePage,,",this.hidePage);
            this.loading = false;
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);

            } else {
              console.error(res.message);
            }
          })
          .catch((err) => {});
      },
    },
  };
</script>
<style lang="scss" scoped>
  .divisional {
   /deep/ .el-row:nth-child(1) {
       width: 100%;
       height: 66px;
       // background: pink;
       padding: 0;
       margin: 0;

       .el-col {
         padding: 0;
         height: inherit;
         /* border: 1px solid slategrey; */
         box-sizing: border-box;
         overflow: hidden;

         div:nth-child(1) {
           width: 100%;
           height: inherit;
           //   background: yellowgreen;
           display: flex;
           flex-wrap: wrap;
           // justify-content: flex-start;
           justify-content: space-around;
           box-sizing: border-box;
           /* padding-left: 30px;
           padding-top: 40px; */
           overflow-y: auto;

           .v_box {
             width: 20%;
             height: 8vh;
             margin-left: 15px;
             margin-right: 40px;
             // margin-bottom: 10px;
             // background: chocolate;
             overflow: hidden;
             display: flex;
             flex-direction: column;
             padding: 0;
             border: none;

             div {
               padding: 0;
             }

             &:nth-child(7) {

               .el-date-editor--daterange.el-input,
               .el-date-editor--daterange.el-input__inner,
               .el-date-editor--timerange.el-input,
               .el-date-editor--timerange.el-input__inner {
                 width: 100%;
               }
             }



             &:last-child {
               display: flex;
               flex-direction: row;
               justify-content: center;
               align-items: center;

               .el-button {
                 width: 70px;
                 height: 30px;

                 &:first-child {
                   margin-right: 10px;
                 }
               }
             }
           }
         }
       }
     }

     /deep/ .el-row:nth-child(2) {
       width: 100%;
      /* height: 60vh; */
       // background: pink;
       padding: 0;
       margin: 0;
       margin-top: 10px;

       table {
         tbody {
           tr {
             td {
               .cell {
                 box-sizing: border-box;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
                 word-break: normal !important;
                 line-height: inherit;
                 //   padding-right: 10px;
               }
             }
           }
         }
       }
     }

     .pageBox {
       display: flex;
       width: 100%;
       justify-content: left;
       margin-top: 10px;
     }


     /deep/ .el-dialog {
       .mainInfoBox {
         width: 100%;
         max-height: 60vh;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
         flex-wrap: wrap;
         overflow-y: auto;

         .infoBox {
           display: flex;
           flex-direction: row;
           justify-content: center;
           align-items: center;
           height: 40px;
           width: 30%;

           label {
             width: 100px;
           }

           .el-input {
             flex: 1 1 auto;
           }
         }
       }
     }
   }


  @import "../../../assets/css/base.css";

  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 80px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText{
    width: 80px;
    justify-content: space-between;
    text-align: right;
    display: inline-block;
  }
  #rqfw .el-range-editor.el-input__inner {
    padding: 2px 2px;
  }
</style>
